<template >
	<navbar titleText="主页"/>
	
	<navigator
		class="search"
		url="/pages/search/index"
	>
		<view class="search-left">
			<image class="search-icon" src="../../static/index/seacch.png"></image>
			<view class="search-text">搜索</view>
		</view>
	</navigator>
	<view class="index1" @click="toRecommendMusic">
		<image class="indexphoto" src="../../static/index/index1.jpg"/>
	</view>
	<view class="index2">
		<image class="indexphoto2" src="../../static/index/index2.jpg"/>
		<image class="indexphoto3" src="../../static/index/index3.jpg" @click="toSelectedMusic"/>
	</view>
	<view class="line"></view>
	<view class="pagebar">
		<view class="content-tittle">
			<text style="font-size: 44rpx; color: #333333;">热门曲谱</text> 
			<view @click="toHotMusic">
				<text style="font-size: 27rpx;">更多</text>
				<image class="more" src="../../static/index/more.png"></image>
			</view>
		</view>
		<scroll-view scroll-x="true" class="scroll-X">
			<view v-for="(item,index) in init_id" :key="index" :data-hid="item.init_hot_id" class="content-card" @click="toDatail">
				<image :src="all_products[item.init_hot_id].img ? all_products[item.init_hot_id].img : '../../static/img_default.png'" class="content-photo"></image>
				<view class="content-text">{{all_products[item.init_hot_id].name}}</view>
				<view class="content-text2">{{all_products[item.init_hot_id].author}}</view>
			</view>
		</scroll-view>
	</view>
	<view class="line"></view>
	
	
	<view class="pagebar">
		<view class="content-tittle">
			<text style="font-size: 44rpx; color: #333333;">今日精选</text> 
			<view @click="toGoodMusic">
				<text style="font-size: 27rpx;">更多</text>
				<image class="more" src="../../static/index/more.png"></image>
			</view>
		</view>
		<scroll-view scroll-x="true" class="scroll-X">
			<view v-for="(item,index) in init_id" :key="index" :data-hid="item.init_good_id" class="content-card" @click="toDatail">
				<image :src="all_products[item.init_good_id].img ? all_products[item.init_good_id].img : '../../static/img_default.png'" class="content-photo"></image>
				<view class="content-text">{{all_products[item.init_good_id].name}}</view>
				<view class="content-text2">{{all_products[item.init_good_id].author}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';
	
	const app = getApp()
	
	const all_products =ref([])     //主数据
	const init_id =ref([])          //初始化数据id索引
	onLoad(()=>{
		init()                               //初始化
	})
	
	
	const toDatail =(e)=>{           //跳转详情
		app.globalData.utils.toDetails(e.currentTarget.dataset.hid)
	}
	
	const init = ()=>{
		app.globalData.utils.request({   //获取主数据包
			url:"/all_products",
			success:res =>{
				all_products.value=res
			},
			fail:err =>{
				console.log(err)
			}
		})
		
		app.globalData.utils.request({    //获取初始化id数据
			url:"/init_products_id",
			success:res =>{
				init_id.value = res
			},
			fail:err=>{
				console.log(err)
			}
		})
		
	}
	
	const toHotMusic = ()=>{
		uni.navigateTo({
			url:'/pages/list/index?totext=hot'
		})
	}
	
	const toGoodMusic=()=>{
		uni.navigateTo({
			url:'/pages/list/index?totext=good'
		})
	}
	
	const toRecommendMusic=()=>{
		uni.navigateTo({
			url:'/pages/list/index?totext=recommend'
		})
	}
	
	const toSelectedMusic=()=>{
		uni.navigateTo({
			url:'/pages/list/index?totext=selected'
		})
	}
</script>

<style>

	.search{
		margin: 20rpx 40rpx 20rpx 40rpx;
		width: 670rpx;
		height: 70rpx;
		border-radius: 32rpx;
		background-color: #eeeeee;
		position: relative;
	}
	.search-left{
		margin: 10rpx 20rpx 20rpx 20rpx;
		position: absolute;
		display: flex;
	}
	.search-icon{
		width: 54rpx;
		height: 54rpx;
	}
	.search-text{
		font-size: 32rpx;
		margin: 3rpx 5rpx 5rpx 15rpx;
		color: #999999;
	}
	.index1{
		width: 670rpx;
		height: 240rpx;
		margin: 40rpx;
	}
	.indexphoto{
		width: 670rpx;
		height: 240rpx;
	}
	.index2{
		width: 670rpx;
		height: 160rpx;
		margin: 40rpx 40rpx 20rpx 40rpx;
	}
	.indexphoto2{
		width: 320rpx;
		height: 160rpx;
	}
	
	.indexphoto3{
		width: 320rpx;
		height: 160rpx;
		margin-left:30rpx ;
	}
	.line{
		height: 20rpx;
		background-color:#F5F5F5 ;
	}
	.content-tittle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 40rpx 20rpx 40rpx;
		
	}
	.more{
		height: 20rpx;
		width: 20rpx;
	}
	.scroll-X{
		white-space: nowrap;
		overflow: hidden;
		width: 670rpx;
		height: 330rpx;
		margin: 20rpx 40rpx;
	}
	.content-card{
		width: 180rpx;
		height: 320rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
	.content-photo{
		width: 180rpx;
		height: 252rpx;
		/* background-color: aqua; */
	}
	.content-text{
		font-size: 27rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.content-text2{
		font-size: 22rpx;
	}

</style>
